<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            .header{
                height: 500px;
                background:url('images/bg.jpg') repeat-x;
            }
            .con{
                width: 968px;
                height: 376px;
                background:lime;
                /* 第一个值上 第二个值左右 第三个下 */
                margin:47px auto 30px;
            }
            .footer{
                width: 968px;
                height: 51px;
                margin:0px auto;
                background:lime;
            }
            .nav,.banner{
                width:968px;
                margin:0px auto;
            }
            .nav h1{
                float: left;
            }
            .nav ul{
                float: right;
            }
            .nav img{
                height: 43px;
                margin-top: 17px;
            }
            .nav li{
                float: left;
                margin-right: 18px;
                margin-top: 21px;
                padding:12px;
            }
            .nav li:hover{
                background:red;
                /* 增加圆角 */
                border-radius: 20px;
            }
            .nav a{
                color:#fff;
                font-size: 18px;
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <!-- 整体限制宽高，内部标签选择性限制 -->
        <div class="header">
            <div class="nav">
                <!-- 引入logo必须使用h1 一般一个页面只有一个h1 -->
                <h1>
                    <a href="">
                        <img src="images/logo.png" alt="">
                    </a>
                </h1>
                <!-- ul>li实现结构类似的布局 -->
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a href="">首页</a></li>
                    <li><a href="">首页</a></li>
                    <li><a href="">首页</a></li>
                    <li><a href="">首页</a></li>
                    <li><a href="">首页</a></li>
                    <li><a href="">首页</a></li>
                    <li><a href="">首页</a></li>
                </ul>
            </div>
            <div class="banner">
                <div class="left">
                    <h6></h6>
                </div>
                <img src="images/com.png" alt="" class="right">
            </div>
        </div>
        <div class="con"></div>
        <div class="footer"></div>
    </body>
</html>
